import { Calendar, Badge, Spin, Tag, Select } from 'antd';
import React, { Component } from 'react';
import moment from 'moment';
import './index.less';

export default class Notice extends Component {
  state = {
    selectedMonth: moment().format('MM'),
    selectedYear: moment().year(),
  };
  componentDidMount(state) {}
  render() {
    return (
      <div>
        <Calendar
          className="appointment-content-calendar"
          onPanelChange={(date) => console.log(date.format())}
          fullscreen
          dateCellRender={(date) => {
            const index = date.format('d');
            const info = [
              '准备坐牢',
              '加油',
              '奥利给',
              '冲冲冲',
              '不要怂',
              '划水',
              '休息',
            ];
            const tags = [
              'magenta',
              'red',
              'volcano',
              'gold',
              'lime',
              'cyan',
              'purple',
            ];
            const { selectedMonth, selectedYear } = this.state;
            if (selectedMonth === date.format('MM')) {
              return <Tag color={tags[index]}>{info[index]}</Tag>;
            } else {
              return null;
            }
          }}
          headerRender={({ value, type, onChange, onTypeChange }) => {
            const start = 0;
            const end = 12;
            const monthOptions = []; //处理后要渲染到页面的月份数组
            const current = value.clone();
            const localeData = value.localeData(); //本地化时间
            const months = []; //月份数组

            for (let i = 0; i < 12; i++) {
              current.month(i); //设置月份
              months.push(current.format('MM')); //处理月份并并入数组
            }

            //月份选择器
            for (let index = start; index < end; index++) {
              monthOptions.push(
                <Select.Option
                  className="month-item"
                  key={`${index}`}
                  value={months[index]}
                >
                  {months[index].replace('0', '') + '月'}
                </Select.Option>,
              );
            }

            const month = value.month();
            const year = value.year();
            const options = []; //年份数组
            for (let i = year - 20; i < year + 20; i += 1) {
              options.push(
                <Select.Option key={i} value={i} className="year-item">
                  {i}
                </Select.Option>,
              );
            }

            return (
              <div style={{ padding: '5px 15px' }}>
                <div
                  type="flex"
                  style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    flexWrap: 'wrap',
                  }}
                >
                  <div>
                    {/* < */}
                    <div
                      style={{
                        display: 'inline-block',
                        height: '32px',
                        paddingTop: '4px',
                        cursor: 'pointer',
                      }}
                      onClick={() => {
                        const newValue = value.clone();
                        newValue.month(parseInt(month, 10) - 1);
                        this.setState({
                          selectedMonth: newValue.format('MM'),
                        });
                        onChange(newValue);
                      }}
                    >
                      &lt;
                    </div>
                    {/* 年份选择器 */}
                    <Select
                      dropdownMatchSelectWidth={false}
                      className="calendar-select"
                      onChange={(newYear) => {
                        const now = value.clone().year(newYear);
                        this.setState({
                          selectedYear: parseInt(year, 10) - 1,
                        });
                        onChange(now);
                      }}
                      value={this.state.selectedYear}
                    >
                      {options}
                    </Select>
                    {/* 月份选择器 */}
                    <Select
                      dropdownMatchSelectWidth={false}
                      className="calendar-select"
                      value={this.state.selectedMonth}
                      onChange={(selectedMonth) => {
                        const newValue = value.clone();
                        newValue.month(parseInt(selectedMonth, 10));
                        this.setState({
                          selectedMonth: newValue.format('MM'),
                        });
                        onChange(newValue);
                      }}
                    >
                      {monthOptions}
                    </Select>
                    {/* > */}
                    <div
                      style={{
                        display: 'inline-block',
                        height: '32px',
                        paddingTop: '4px',
                        cursor: 'pointer',
                      }}
                      onClick={() => {
                        const newValue = value.clone();
                        newValue.month(parseInt(month, 10) + 1);
                        this.setState({
                          selectedMonth: newValue.format('MM'),
                        });
                        onChange(newValue);
                      }}
                    >
                      &gt;
                    </div>
                  </div>
                </div>
              </div>
            );
          }}
          onPanelChange={(date) => {
            this.setState({
              selectedMonth: date.format('MM'),
              selectedYear: date.format('YYYY'),
            });
          }}
        />
      </div>
    );
  }
}
